<template>
  <el-card>
    <el-row type="flex" class="bigbox">
      <el-card class="box-head">
        <el-row class="left" type="flex">
          <div class="box-left el-icon-user-solid" />
          <div class="box-right">
            <span class="top">用户数量</span>
            <span>{{ ClientsCount }}</span>
          </div>
        </el-row>
      </el-card>
      <el-card class="box-head">
        <el-row class="left" type="flex">
          <div id="num" class="box-left el-icon-office-building" />
          <div class="box-right">
            <span class="top">房产数量</span>
            <span>{{ PropertiesCount }}</span>
          </div>
        </el-row>
      </el-card>
      <el-card class="box-head">
        <el-row class="left" type="flex">
          <div id="classes" class="box-left el-icon-s-help" />
          <div class="box-right">
            <span class="top">房产类别</span>
            <span>82543</span>
          </div>
        </el-row>
      </el-card>
      <el-card class="box-head">
        <el-row class="left" type="flex">
          <div id="agency" class="box-left el-icon-mobile-phone" />
          <div class="box-right">
            <span class="top">房产中介</span>
            <span>{{ AgentsCount }}</span>
          </div>
        </el-row>
      </el-card>
    </el-row>
  </el-card>
</template>

<script>
import { getClients, getProperties, getAgents, getCategories } from '@/api/shouye'
export default {
  data() {
    return {
      ClientsCount: 0, // 用户数量
      PropertiesCount: 0, // 房产数量
      AgentsCount: 0, // 经纪数量
      CategoriesCount: 0 // 分类数量
    }
  },
  async created() {
    // 用户数量
    this.ClientsCount = await getClients()
    // 房产数量
    this.PropertiesCount = await getProperties()
    // 经纪数量
    this.AgentsCount = await getAgents()
    // 分类数量
    this.CategoriesCount = await getCategories()
    // console.log('分类', this.getCategories)
  },
  mounted() {

  },
  methods: {

  }
}
</script>

<style  lang="scss">
.bigbox{
  display: flex;
  justify-content: space-evenly;
}
.box-head{
  width: 200px;
  // margin-left: 20px;
.left{
  width: 200px;
  height: 50px;
  display: flex;
  text-align: center;
  justify-content: space-between;
  align-content: space-between;
.box-left{
  line-height: 50px;
  width: 80px;
  font-size: 50px;
}
  .box-right{
    width: 80px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: center;
    margin-right: 30px;
    color: #ccc;
    .top{
      margin-bottom: 10px;
    }
  }
}
}
#num{
  color: yellowgreen;
}
#classes{
  color: red;
}
#agency{
  color: green;
}
</style>
